SVG 自學微筆記(10) - SVG...然後呢? - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

SVG 自學微筆記(10) - SVG...然後呢?

d3.js chart.js svg 資料視覺化網頁設計

Xiang1009 2023-06-22 04:07:41 ‧ 2288 瀏覽

分享至

基本上是這系列最後一篇，除非之後接觸到跟SVG相關的有趣應用! (≧▽≦)

我在大學畢業的最後一學期，選修了網頁資料視覺化的課程，課程主要使用D3.js這個JavaScript擴充函式庫做資料視覺化的工作。那D3.js是什麼? 跟SVG有什麼關係呢?

D3.js

D3指的是Data-Driven Document，以資料驅動編輯網頁的DOM，更白話的說法就是可以根據資料的筆數，動態地生成相同數量的網頁元素。

再舉個實際的例子:

建立data變數，並在裡面放入三個人分別喜歡的水果資料。然後利用D3.js內建的函數，將john喜歡的水果資料匯入，D3.js就能自動根據資料筆數在body建立三個div元素，而且還能在網頁上顯示出資料的文字內容。

<script src="//unpkg.com/d3"></script>
<script>
    var data = { 
        john: ['Apple', 'Orange', 'Lemon'],
        marry: ['Apple', 'Orange'],
        ryan: ['Apple', 'Cherry', 'Peach', 'Orange']
    };
    d3.select("body").selectAll('div')
      .data(data['john'])
      .enter()
      .append('div').text(function(d){return d;})
</script>

D3.js除了可以動態改變DOM，還可以在載入資料時，對資料進行一定程度的前處理，以111年臺中市第4屆市長選舉的候選人盧秀燕收到的政治獻金(incomes.csv)為例，我們可以先透過D3.js內建的方法把資料呈現在瀏覽器的console，並觀察這些資料需要哪些前處理以及哪些資料需要被保留。

d3.csv("盧秀燕市長選舉資料/incomes.csv").then(function(data){
    console.log(data);
});

從下圖可以看到總共有683筆的政治獻金資料，以及每筆政治獻金所有的欄位資料。

假設我們現在想要保留地址、捐贈者/支出對象、收入金額、收支科目和身分證/統一編號，並把收入金額從字串轉換成數字，那要怎麼透過D3.js完成呢? 方法其實很簡單，我們只要用JavaScript定義一個方法，然後把原始資料傳入，最後再回傳要保留的資料欄位和已經轉換資料型態的資料就可以囉!

//僅保留需要的資料欄位
function DataPreProcess(data){
    return {
        '地址' : data['地址'],
        '捐贈者／支出對象' : data['捐贈者／支出對象'],
        '收入金額' : +data['收入金額'], //字串轉換成數字
        '收支科目' : data['收支科目'],
        '身分證／統一編號' : data['身分證／統一編號'],
    }
}

//在載入資料時，用DataPreProcess進行資料前處理
d3.csv("盧秀燕市長選舉資料/incomes.csv",DataPreProcess).then(function(data){
    console.log(data)
})

下圖可以看到我們成功地保留需要的那幾個資料欄位並完成收入金額資料型態的轉換囉!

以上只是對於D3.js粗淺的介紹和應用，實際使用過D3.js就會發現，它的語法實在和jQuery頗為類似，不過相比於jQuery的廣泛應用，D3.js則聚焦在資料視覺化上。(雖然部分人認為jQuery正在走向沒落，但目前還是有接近95%的網站有使用jQuery喔!)

(圖片出自: W3Techs)

所以到底D3.js跟SVG有什麼關係呢? 在網頁上建立圖形畫布主要有兩大選擇，其中一個是Canvas，另一個則是SVG。想當然爾D3.js產生資料視覺化的圖形都是建立在SVG畫布之下囉! 我們可以在HTML當中建立SVG畫布，然後使用D3.js的內建函數，去新增各種SVG元素並做出多樣的圖表，同時我們還能根據資料的變化，添加自訂的互動性動畫效果等等。

下圖就是透過D3.js配合SVG在網頁呈現的長條圖，原始碼因為太長就不放了。